<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>控制台</title>
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <link rel="stylesheet" href="../src/css/font-awesome.min.css">
    <link rel="stylesheet" href="../src/css/style.min.css">
    <script src="../src/js/jquery-3.3.1.min.js"></script>
    <script src="../src/js/bootstrap.min.js"></script>
</head>
<body>
        
            <section class="content-container">
                <div class="content-wrapper">
                    <div class="page-index-wrap">
                        <div class="row">
                            <div class="col-6">
                                <div id="j-chart-graph" class="common-chart"></div>
                            </div>
                            <div class="col-2">
                                <div class="block-center">
                                    <h3 class="b-title">
                                        年销售概览 <span class="t">(单位：万)</span>
                                    </h3>
                                    <div class="b-num">
                                        <b>568.5</b> <img src="../src/img/icon_arrow_up.jpg" alt="">
                                    </div>
                                    <ul class="b-list list-unstyled">
                                        <li class="clearfix">
                                            <i class="dot"></i>
                                            <span class="tit">销售金额</span>
                                            <span class="num">1,258</span>
                                        </li>
                                        <li class="clearfix">
                                            <i class="dot"></i>
                                            <span class="tit">增长情况</span>
                                            <span class="num">1,00010</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="block-right">
                                    <ul class="b-list list-unstyled">
                                        <li class="p1">
                                            <h3 class="tit">本月销售金额</h3>
                                            <div class="info">
                                                <i class="rmb">¥</i><b class="num">25870.5</b><span class="tips blue">+25%</span>
                                            </div>
                                        </li>
                                        <li class="p2">
                                            <h3 class="tit">本月销售单量</h3>
                                            <div class="info">
                                                <b class="num">1006</b><span class="tips red">-8.3%</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <div id="j-chart-doughnut" class="common-chart"></div>
                            </div>
                            <div class="col-4">
                                <div id="j-pie-chart" class="common-chart"></div>
                            </div>
                            <div class="col-4">
                                <div id="j-chart-line" class="common-chart"></div>
                            </div>
                        </div>
                    </div>


                </div>
            </section>
    <script src="../src/js/echarts.min.js"></script>
    <script type="text/javascript" src="../src/js/logout.js"></script>
    <script>
        

        //柱状图 myChart
        var myChart = echarts.init(document.getElementById("j-chart-graph"));
        myChart.setOption({
            color: ['#3398DB'],
            title: { text: '年销售概览' },
            tooltip: {},
            xAxis: {
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 60, 80, 16, 5, 16, 19]
            }]
        });


        //画环形图 chartDoughnut
        var chartDoughnut = echarts.init(document.getElementById("j-chart-doughnut"));
        chartDoughnut.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ]
                }
            ]
        });

        //画饼形图 chartPie
        var chartPie = echarts.init(document.getElementById('j-pie-chart'));
        chartPie.setOption({
            title: {
                text: 'Pie Chart',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

        //画折线图 chartLine
        var chartLine = echarts.init(document.getElementById('j-chart-line'));
        chartLine.setOption({
            title: {
                text: 'Line Chart'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        });

    </script>
</body>

</html>